<template>
  <div>
    <h2 style="text-align: left; margin-left: 3%">新品上市</h2>
    <div v-if="isLoad">
      <van-skeleton title :row="5" />
    </div>
    <div v-else>
      <div class="list">
        <div v-for="(item, index) in NewShopList" :key="index" class="miniStreamView">
          <van-image
            class="imgs"
            fit="contain"
            v-lazy
            :src="url + item.original_img"
          />
          <div class="text-warp" :title="item.goods_name">
            {{ item.goods_name }}
          </div>
          <div class="price">${{ item.market_price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoad: true,
      NewShopList: [],
      url: "https://img.9lele.com",
    };
  },
  mounted() {
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      500
    );
  },
  computed: {
    ...mapGetters(["newshop"]),
  },
  methods: {
    getBanner() {
      this.$store.dispatch("apple/NewShopList").then((e) => {
        // console.log(e);
        this.NewShopList = e.data.data;
        console.log(30, this.NewShopList);
      });
    },
  },
  created() {
    this.getBanner();
  },
};
</script>

<style scoped="scoped">
.list {
  width: 100%;
  height:40vh;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.miniStreamView {
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  display: inline-block;
  margin: 0 3%;
  /* background:pink; */
  /* margin: 6px; */
  /* width: 0px;   */
}
::-webkit-scrollbar {
  width: 0px;
}
.text-warp {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  margin-left: 3%;
  font-size: 1.1rem;
}
.imgs {
  width: 100%;
  height: 80%;
}
.price {
  text-align: left;
  margin-left: 3%;
  color: rgba(255, 38, 0, 0.575);
}
</style>